<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-11-03 15:14
  PageName：b_border-spacing_Style.html
  Function：表格CSS样式 - 定义单元格间距和空隙
  URL：http://localhost:8080/i_table/i5_style_table/b_border-spacing_Style.html
-->

<head>
    <meta charset="UTF-8">
    <title>表格CSS样式 - 定义单元格间距和空隙</title>

    <style type="text/css">
        table {
            border-spacing: 6px 12px;  /* 为表格内单元格定义上下6像素、左右12像素 */
            border: solid 2px red;     /* 表格外框为2像素红色实线 */
            padding: 2px;              /* 设置表格外框与内部单元格间距为2像素 */
        }

        th, td {
            font-size: 12px;
            border: solid 1px gray;
            padding: 12px;   /* 设置单元格内部空隙为12像素 */
        }
    </style>
</head>

<body>
<table>
    <tr>
        <th>属性</th>
        <th>版本</th>
        <th>继承性</th>
        <th>描述</th>
    </tr>
    <tr>
        <td>table-layout</td>
        <td>CSS2</td>
        <td>无</td>
        <td>设置或检索表格的布局算法</td>
    </tr>
    <tr>
        <td>border-collapse</td>
        <td>CSS2</td>
        <td>有</td>
        <td>设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开</td>
    </tr>
    <tr>
        <td>border-spacing</td>
        <td>CSS2</td>
        <td>有</td>
        <td>设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距</td>
    </tr>
    <tr>
        <td>caption-side</td>
        <td>CSS2</td>
        <td>有</td>
        <td>设置或检索表格的caption对象是在表格的那一边</td>
    </tr>
    <tr>
        <td>empty-cells</td>
        <td>CSS2</td>
        <td>有</td>
        <td>设置或检索当表格的单元格无内容时，是否显示该单元格的边框</td>
    </tr>
</table>
</body>
</html>